<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支付页面_中国梦想游网</title>
<link href="/font/css/style.css" rel="stylesheet" type="text/css" />
<link href="/font/css/common.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/font/css/tk_order.css">
<script type="text/javascript" src="/font/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/font/js/payPwd.js"></script>
<style type="text/css">
.ka {
height:200px;
	padding-left: 10px;
	margin-top: 10px;
	padding-top: 20px;
	font-size: 23px;
	background-color: #ECECFF;
	font-size: 23px;
}

.order_content {
	height: 94px;
}

/* 支付 开始*/
.box {
	width: 30%;
	height: 38px;
	margin: 0rem auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.box-items {
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}

.flex-1 {
	display: block;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	width: 0;
	-webkit-flex-basis: 0;
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
}

.pwd-control {
	padding: 1rem 0 2.5rem;
	text-align: center;
}

.pwd-control .item {
	margin: 0 0.1rem;
	position: relative;
}

.pwd-control .item.circle:after {
	content: "";
	width: 8px;
	height: 8px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -4px;
	margin-left: -4px;
}

.pwd-control .normal input {
	color: #000;
}

.pwd-control input {
	display: block;
	width: inherit;
	border-radius: 3px;
	text-align: center;
	border: 1px solid #c79f62;
	width: 90%;
	color: #fff;
	line-height: 35px
}

.pwd-control input:focus {
	box-shadow: 0px 0px 20px #c79f62;
}

.pwd-control .box {
	padding: 0rem;
}
/* 支付结束 */
</style>
<script type="text/javascript" src=""></script>

<script type="text/javascript">
	$(function() {


		if ('${xinxinum}' == "单程") {
			$("#wangfan").hide();
		

		}

		if ('${xinxinum}' == "往返") {
			$("#wangfan").show();
			$("#dancheng").hide();


		}
	})

	function showdiv() {
		document.getElementById('show').style.display = document
				.getElementById('show').style.display == "none" ? "block"
				: "none";
	}
	function beforeSubmit(form) {
		 if ($("#inputtype").text().length == 7) {			
			alert('请填写正确密码！');
			return false;
		} 
		 
		 if($("#inputtype").text().length==6){
			 
			 if($("#inputtype").text()=='666666'){
				 return true;				 
			 }
			 alert('请填写正确密码！');
			 return false;
		 }
		
	}

	/* 支付开始 */
	$(function(){
		$("#payPwd").payPwd({
			max:6,
			type:"password",
			callback:function(arr) {
				console.log(arr);
				$("#inputtype").html(arr);
			}
		})
	})
	/* 支付结束 */
</script>
</head>
<body onload="danfan()">

	<div class="top_hw clearfix">
		<div class="top_h clearfix">
			<div class="top_hl">
				<span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：<b>0571-63322269</b>
			</div>
			<div class="top_hr">
				<a href="#">登录</a> | <a href="#">注册</a> | <a href="#">我的</a>
			</div>
		</div>
	</div>
	<div class="head_w">
		<div class="head_t clearfix">
			<div class="logo">
				<img src="/font/images/logo.jpg">
			</div>
		</div>
	</div>
	<div class="b_wrap">

		<div class="order_box" id="J_Ticket">


			<span class="order_title">订单信息</span> <span
				style="display: inline-block">订单编号：</span><span
				style="display: inline-block; color: orangered;">${onum}</span> <span
				style="margin-left: 150px;">人数：</span><span
				style="margin-left: 6px; font-size: 18px; color: orangered;">${renshu }人</span>

			<span style="margin-left: 235px;">应付款：</span><span
				style="margin-left: 6px; font-size: 20px; color: orangered;">￥${zongjiaqian}</span>
			<div id="center">
				<!--  往返-->
				<div id="wangfan" style="display: none;">
					<div class="order_content">
						<!--ticket detail info S-->
						<div class="train_detail clearfix">
							<div class="train_name">
								<div class="train_num"
									style="font-size: 21px; margin-top: -40px; margin-bottom: 14px; color: skyblue;">往</div>
								<div class="train_num">${cname }</div>
								<div class="train_det_date" style="color: orangered;">
							
								</div>
							</div>
							<div class="train_date_start">
								<strong class="train_det_time">${starttime}</strong> <span
									class="train_det_station">${param.action }<i
									class="icon "></i></span> <span class="train_det_date">${actiondate}
									<br />${week1 }
								</span>

							</div>
							<div class="train_duration">
								<div class="train_duration_left"></div>
								<strong class="train_duration_time">${zongtime1}</strong>
								<div class="train_duration_right"></div>
								<div class="train_icon"></div>
							</div>
							<div class="train_date_end">
								<strong class="train_det_time">${endtime}</strong> <span
									class="train_det_station">${over}<i
									class="icon icon_end"></i></span> <span class="train_det_date">
									${actiondate}<br />${week1 }
								</span>

							</div>
						</div>
						<!--ticket detail info E-->
						<!--ticket seat type S-->
						<div class="train_types clearfix">
							<div class="J_TrainType train_type  selected"
								data_resId="1425125366"
								style="margin-left: 543px; margin-top: -118px;">
								<table>
									<tr>
										<td class="td1 ">${zuotype }</td>
										<td class="seat_price">￥${price }</td>
									</tr>
								</table>
							</div>

						</div>

					</div>
					<div class="order_content">
						<!--ticket detail info S-->
						<div class="train_detail clearfix">
							<div class="train_name">
								<div class="train_num"
									style="font-size: 21px; margin-top: -40px; margin-bottom: 14px; color: skyblue;">返</div>
								<div class="train_num">${cname1}</div>
								<div class="train_det_date" style="color: orangered;">
									<span>5</span><span>车厢</span><span>25</span><span>号</span>
								</div>
							</div>
							<div class="train_date_start">
								<strong class="train_det_time">${starttime1 }</strong> <span
									class="train_det_station">${action1 }<i class="icon "></i></span>
								<span class="train_det_date">${actiondate1} <br />${week2}
								</span>

							</div>
							<div class="train_duration">
								<div class="train_duration_left"></div>
								<strong class="train_duration_time">${zongtime2}</strong>
								<div class="train_duration_right"></div>
								<div class="train_icon"></div>
							</div>
							<div class="train_date_end">
								<strong class="train_det_time">${endtime1}</strong> <span
									class="train_det_station">${over1}<i
									class="icon icon_end"></i></span> <span class="train_det_date">
									${actiondate1}<br />${week2 }
								</span>

							</div>
						</div>
						<!--ticket detail info E-->
						<!--ticket seat type S-->
						<div class="train_types clearfix">
							<div class="J_TrainType train_type  selected"
								data_resId="1425125366"
								style="margin-left: 543px; margin-top: -118px;">
								<table>
									<tr>
										<td class="td1 ">${zuotype1}</td>
										<td class="seat_price">￥${price1 }</td>
									</tr>

								</table>
							</div>

						</div>

					</div>
				</div>
				<!-- 单程 -->
				<div id="dancheng">
					<div class="order_content">
						<!--ticket detail info S-->
						<div class="train_detail clearfix">
							<div class="train_name">

								<div class="train_num" style="margin-top: -28px;">${cname}</div>
								<div class="train_det_date" style="color: orangered;">
						
								</div>
							</div>
							<div class="train_date_start">
								<strong class="train_det_time">${starttime }</strong> <span
									class="train_det_station">${action}<i class="icon "></i></span>
								<span class="train_det_date">${actiondate} <br />${week1 }
								</span>

							</div>
							<div class="train_duration">
								<div class="train_duration_left"></div>
								<strong class="train_duration_time">${zongtime1}</strong>
								<div class="train_duration_right"></div>
								<div class="train_icon"></div>
							</div>
							<div class="train_date_end">
								<strong class="train_det_time">${endtime}</strong> <span
									class="train_det_station">${over}<i
									class="icon icon_end"></i></span> <span class="train_det_date">
									${actiondate}<br />${week1 }
								</span>

							</div>
						</div>
						<!--ticket detail info E-->
						<!--ticket seat type S-->
						<div class="train_types clearfix">
							<div class="J_TrainType train_type  selected"
								data_resId="1425125366"
								style="margin-left: 543px; margin-top: -118px;">
								<table>
									<tr>
										<td class="td1 ">${zuotype }</td>
										<td class="seat_price">￥${price}</td>
									</tr>

								</table>
							</div>

						</div>

					</div>
				</div>
			</div>
			<div class="foot" style="margin-bottom: 23px; margin-left: 28px;">


			</div>
		</div>
		<!-- 付款银行选择 -->
		<div class="fk_wrap">
			<div class="fk_tit">您可以使用以下方式付款：</div>
			<div class="fk_con">
				<div class="fk_bank">
					<div class="fk_tw clearfix">
						<div class="fn-left">
							<img src="/font/images/kj_zf.jpg">
						</div>
						<div class="hd_b fn-left">
							<ul>
								<li><img src="/font/images/hui.jpg" align="absmiddle">每天都有银行优惠</li>
								<li><img src="/font/images/ji.jpg" align="absmiddle">银行积分当钱花</li>
								<li><img src="font/images/fan.jpg" align="absmiddle">每10元反一个集分宝</li>
							</ul>
							<i><img src="/font/images/z_row.jpg"></i>
						</div>
					</div>

					<table class="tj_bank" width="900" border="0" cellspacing="0"
						cellpadding="0">
						<caption>推荐银行：</caption>
						<tbody>
							<tr>
								<td><label><input type="radio" checked="checked" name="RadioGroup1"
										value="单选" id="RadioGroup1_0"></label>
									<div class="xz_yx">
										<div class="yh_zp">
											<img src="/font/images/bank01.jpg">
										</div>
									
										<div></td>
								<td><label><input type="radio" name="RadioGroup1"
										value="单选" id="RadioGroup1_3"></label>
									<div class="xz_yx">
										<div class="yh_zp">
											<img src="/font/images/bank02.jpg">
										</div>
										
										<div></td>
								<td><label><input type="radio" name="RadioGroup1"
										value="单选" id="RadioGroup1_2"></label>
									<div class="xz_yx">
										<div class="yh_zp">
											<img src="/font/images/bank01.jpg">
										</div>
										
										<div></td>
								<td><label><input type="radio" name="RadioGroup1"
										value="单选" id="RadioGroup1_1"></label>
									<div class="xz_yx">
										<div class="yh_zp">
											<img src="/font/images/bank01.jpg">
										</div>
										
										<div></td>
							</tr>
							<tr>
								<td><label><input type="radio" name="RadioGroup1"
										value="单选" id="RadioGroup1"></label>
									<div class="xz_yx">
										<div class="yh_zp">
											<img src="/font/images/bank05.jpg">
										</div>
										
										<div></td>
								<td><label><input type="radio" name="RadioGroup1"
										value="单选" id="RadioGroup3"></label>
									<div class="xz_yx">
										<div class="yh_zp">
											<img src="/font/images/bank06.jpg">
										</div>
										<div></td>

								<td></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="next_b">
					<!-- <a href="#" ><img src="/font/images/next.jpg" id="xia" onclick="xia()" ></a> -->
					<input type="button" value="去支付" id="xia" onclick="showdiv()"
						style="background-color: orange; padding: 8px 15px 8px 15px">
				</div>
				<form
					action="${pageContext.request.contextPath}/UpdateOrderTabelStateServlet"
					method="post" id="form" onSubmit="return beforeSubmit(this);">
					<div class="ka" id="show" style="display: none;"
						onSubmit="return myCheck()">
						<%-- 请输入卡号：<input type="text" name="account" id="account" placeholder="请输入银行卡号"><br>	

						请输入密码：<input type="text" name="pwdnum" placeholder="请输入银行卡密码"><br>
						<input type="hidden" name="onum" id="onum" value="${param.onum}"  />
						<input type="hidden" name="state" id="state" value="${param.state}" /> 
						<input type="hidden" name="zuotype" id="state" value="${param.zuotype}" /> 
						<input type="hidden" name="piaoshu" id="state" value="3" />
						<input type="hidden" name="cname" id="state" value="${param.cname}" />
					    <input type="hidden" name="riqi" id="state" value="${param.actiondate}" />  --%>
						<h2 style="text-align: center;">请输入支付密码：</h2>
						<div class="pwd-control" id="payPwd">
							<div class="box">
								<div class="flex-1 item">
									<input maxlength="1" type="tel">
								</div>
								<div class="flex-1 item">
									<input maxlength="1" type="tel">
								</div>
								<div class="flex-1 item">
									<input maxlength="1" type="tel">
								</div>
								<div class="flex-1 item">
									<input maxlength="1" type="tel">
								</div>
								<div class="flex-1 item">
									<input maxlength="1" type="tel">
								</div>
								<div class="flex-1 item">
									<input maxlength="1" id="caid" type="tel">
								</div>
							</div>
						</div>
						<div class="" style="display: none;">
							您输入的密码:<span id="inputtype"><span>
						</div> 

						 <input type="submit" value="支付" id="bt"
							style="background-color: orange; padding: 6px 15px 6px 15px; margin: 10px 0 5px 420px;">
					</div>
				</form>
			</div>
		</div>
		<!-- 付款问题文档 -->
		<div class="wt_wrap">
			<p>
				<b>付款遇到问题：</b>
			</p>
			<p>
				<b>1.什么是快捷支付(含卡通)？</b>
			</p>
			<p>答：快捷支付是支付宝联合各大银行推出的全新的支付方式。只要您有银行卡，就可以在支付宝付款。付款时无需登录网上银行，凭支付宝支付密码和手机校验码即可完成付款。（原卡通用户自动升级成为快捷支付用户）。</p>
			<p>
				<b>2.使用信用卡快捷支付才能进行分期付款么？</b>
			</p>
			<p>答：是的，而且您的交易金额必须在600元及以上，并选择支持分期的信用卡快捷支付银行。目前已支持招行、中行、农行、建行、民生、光大、平安、中信、广发和兴业银行，
				其他银行即将推出。</p>
			<p>
				<b>3.如何关闭信用卡快捷支付服务？</b>
			</p>
			<p>答：您可以登录“账户管理”，在“银行卡”频道下关闭，或拨打支付宝24小时客服热线，客服会在核实您的信息后为您关闭。查看详情</p>
			<p>
				<b>4.如何修改预存手机号码？</b>
			</p>
			<p>答：拨打银行信用卡服务热线，进入人工服务后，通知银行客服人员修改手机号。修改生效后，需登录支付宝，进入“账户管理-银行卡”频道，修改成新手机号码。</p>
			<p>
				<a href="#">更多帮助 进入我的支付宝</a>
			</p>
		</div>
	</div>
	<!-- 页面底部的信息 -->
	<div class="footer_w">
		<div class="footer clearfix">
			<div class="footer_c">
				<p>地址：中国河南省郑州市二七区马寨镇 &nbsp;| &nbsp;服务热线：0571-62332269 &nbsp; |
					&nbsp;传真：0571-62337233 备案号：0453-2xxxxxx</p>
				<p>
					Copyright © 2013 中国梦想旅游发展有限公司 All Rights Reserved. 技术支持：<a href="#">众创项目3组</a>
				</p>
			</div>
		</div>
	</div>
</body>

</html>
